<template>
    <div>
       <div class="imges" v-if="list.length==0">
            <img src="../../assets/img/1.jpg">
            <h2><font color="#FF0000">货</font><font color="#CC0033">物</font><font color="#990066">卖</font><font color="#660099">光</font><font color="#3300CC">了</font></h2>
       </div>
       <div class="classcontain" >
           <div v-for="(item,index) in list" :key="index">
               <img :src="item.pic" />
              <p>{{item.name}}</p>
           </div>
        </div>   
         
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:[],
            copylist:[]
        }
    },
    mounted() {
        var items = this.$route.query.item
        this.$API.getList().then((res)=>{
            this.copylist=res.data.data
            // console.log(copylist);
            this.copylist.forEach(item => {
                if(item.name.includes(items)){
                   this.list.push(item)   
                }
            });  
        })
          console.log(this.list);
         console.log(items);
     
    },
}
</script>
<style lang="scss">
    .imges{
        width: 100%;
        height: 100%;
        text-align: center;
        img{
            width: 100%;
        }
    }
    .classcontain{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.2rem;
        box-sizing: border-box;
        div{
            width: 48%;
            margin:0px 2px;
            position: relative;
            img{
                width: 100%;
            }
            p{
                position: absolute;
                bottom: 0.1rem;
                background-color: rgba(240,237,212,0.5);
                font-size: 0.8rem;
                width: 100%;
                color: rosybrown;
            }
        }
    }
</style>